<template>
	<view>
		<u-popup
			:show="showGetPhoneNumber"
			mode="bottom"
			:safeAreaInsetBottom="false"
			:round="10"
			@close="close"
			@open="open"
			:closeOnClickOverlay="false"
		>
			<view class="getphonebox">
				<u-button
					text="授权手机号"
					shape="circle"
					color="#588bf3"
					openType="getPhoneNumber"
					@getphonenumber="getphonenumberHander"
					:customStyle="getPhoneNumberCustomStyle"
				/>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapGetters } from "vuex"
	import { getphonenumber } from "@/api/login.js"
	export default {
		name: "getphonenumber",
		computed: {
			...mapGetters(["showGetPhoneNumber"])
		},
		mounted() {},
		data() {
			return {
				getPhoneNumberCustomStyle: {
					color: "#FFF",
					width: "80%",
					height: "80rpx"
				}
			}
		},
		methods: {
			getphonenumberHander(e) {
				const that = this
				if (e.detail.errMsg === "getPhoneNumber:fail user deny") {
					that.close()
					return
				}
				uni.checkSession({
					success() {
						if (that.loginCode) {
							let params = {
								code: e.detail.code,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv,
								appId: that.$appId
							}
							getphonenumber(params).then(async (result) => {
								await that.$store.commit("SET_PHONE", result.data)
								await that.close()
								if (uni.$u.page() === "/pages/user/phone/indexApp") {
									uni.reLaunch({
										url: "/pages_myMeeting/meeting/index"
									})
								}
							})
						}
					},
					fail() {
						uni.navigateTo({
							url: "/pages/user/phone/indexApp"
						})
					}
				})
			},
			close() {
				this.$store.commit("SET_SHOW_PHONE_NUMBER", false)
			},
			open() {}
		}
	}
</script>

<style lang="scss">
	.getphonebox {
		height: 280rpx;
		display: flex;
		align-items: center;
	}
</style>
